<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<style type="text/css">
			html,
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			
			html {
				font-size: 13.333333333vw;
			}
			
			body {}
			
			div {
				height: 100%;
				background: url(img/p1-Loading.png) no-repeat;
				background-size: 100% 100%;
				position: relative;
			}
			
			span {
				font-size: 0.4rem;
				
			}
			
			img {
				width: 3.52rem;
				height: 4.95rem;
				position: absolute;
				left: 2.44rem;
				top: 3.54rem;
			}
			
			#loading {
				position: absolute;
				left: 2.58rem;
				top: 8.86rem;
				font-weight: 500;
			}
			
			#progress {
				position: absolute;
				left: 3.36rem;
				top: 9.38rem;
				font-weight: 700;
			}
		</style>
	</head>

	<body>
		分支
		<div id="">
			<div id="">
				hehe
			</div>
			<img src="img/picture.png" />
			<span id="progress">
				50%
			</span>
			<span id="loading">
				LOADING ---
			</span>
		</div>
		<script type="text/javascript">
			var progress = document.getElementById('progress')
			var loading = document.getElementById('loading')
			
			loading.innerHTML = "LOADING "
		
			
				var num = 0;
				var timer = setInterval(function() {
					num++;
					progress.innerHTML = num + '%';

					if(num == 100) {
						clearInterval(timer)
					}
					
				}, 100)
				var num2 = 0
				var timer2 = setInterval(function() {
					num2++
					if(num2 % 3 == 0) {
						loading.innerHTML = "LOADING ···"
					}
					if(num2 % 3 == 1) {
						loading.innerHTML = "LOADING ·"
					}
					if(num2 % 3 == 2) {
						loading.innerHTML = "LOADING ··"
					}
					if(num == 100){
						clearInterval(timer2)
					}
					console.log(num2)
				}, 1000)
				
		</script>
	</body>

</html>